<template>
    <Back title="新增套餐信息" Add-Doctor-sty="adddoctor">
        <template #head>
            <div class="changeName">编辑套餐信息</div>
        </template>
        <template #table_body>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <!-- 医生姓名输入框 -->
                <el-form-item label="套餐名称" prop="packagename">
                    <el-input style="width:240px;" size="small" placeholder="请输入内容" v-model="ruleForm.packagename">
                    </el-input>
                </el-form-item>
                <!-- 文件上传 -->
                <el-form-item label="套餐图片" prop="packageimg">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="ruleForm.packageimg" :src="ruleForm.packageimg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <!-- 下拉列表 -->
                <el-form-item label="套餐类型" prop="packagetype">
                    <el-select style="width:240px;" size="small" v-model="ruleForm.packagetype" placeholder="请选择套餐类型">
                        <el-option label="东院区" value="东院区"></el-option>
                        <el-option label="南院区" value="南院区"></el-option>
                        <el-option label="西院区" value="西院区"></el-option>
                        <el-option label="北院区" value="北院区"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 下拉列表 -->
                <el-form-item label="所属院区" prop="applydanger">
                    <el-select style="width:240px;" size="small" v-model="ruleForm.applydanger" placeholder="请选择所属院区">
                        <el-option label="内科" value="内科"></el-option>
                        <el-option label="外科" value="外科"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 下拉列表 -->
                <el-form-item label="套餐项目" prop="packageproject">
                    <el-select style="width:240px;" size="small" v-model="ruleForm.packageproject" placeholder="请选择">
                        <el-option label="主治医师" value="主治医师"></el-option>
                        <el-option label="主任医师" value="主任医师"></el-option>
                        <el-option label="护士" value="护士"></el-option>
                        <el-option label="配药师" value="配药师"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 挂号费输入框 -->
                <el-form-item label="套餐价格" prop="packageprice">
                    <el-input style="width:240px;" size="small" v-model="ruleForm.packageprice"></el-input>
                </el-form-item>
                <!-- 表单域 -->
                <el-form-item label="套餐介绍" prop="desc">
                    <el-input style="width:240px;" size="small" placeholder="请输入内容" type="textarea"
                        v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <!-- 表单域 -->
                <el-form-item label="注意事项" prop="matters">
                    <el-input style="width:240px;" size="small" placeholder="请输入内容" type="textarea"
                        v-model="ruleForm.matters"></el-input>
                </el-form-item>
                <!-- 开关 -->
                <el-form-item label="套餐状态" prop="packagestatus">
                    <el-switch v-model="ruleForm.packagestatus"></el-switch>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item style="padding-left: 140px;">
                    <el-button size="small" style="width: 100px;" type="primary" @click="submitForm('ruleForm')">保存
                    </el-button>
                    <el-button size="small" style="width: 100px;" @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </template>
    </Back>
</template>
<script>
// 导入自定义组件
import Back from '@/components/Part/BackColor.vue'
import { getPackageDetail } from '@/api/Hospital/feelApi'
export default {
    data() {
        return {
            ruleForm: {
                packagename: '',
                packageimg: '',
                packagetype: '',
                applydanger: '',
                packageproject: '',
                packageprice: '',
                desc: '',
                matters: '',
                packagestatus: '',
            },
            rules: {
                // 医生名字
                name: [
                    { required: true, message: '请输入医生名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // 院区
                danger: [
                    { required: true, message: '请选择院区', trigger: 'change' }
                ],
                // 科室
                room: [
                    { required: true, message: '请选择科室', trigger: 'change' }
                ],
                // 职称
                job: [
                    { required: true, message: '请选择职称', trigger: 'change' }
                ],
                // 标签
                label: [
                    { required: false, message: '请选择标签', trigger: 'change' }
                ],
                // 挂号费
                registration: [
                    { required: true, message: '请输入挂号费', trigger: 'blur' },
                ],
                // 诊断费
                indagation: [
                    { required: true, message: '请输入诊断费', trigger: 'blur' },
                ],

                // 医生状态
                desc: [
                    { required: false, message: '请填写活动形式', trigger: 'change' }
                ],
                // 医生简介
                delivery: [
                    { required: false, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
        },
        // 图片上传事件
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },


        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.$router.back()
                    }, 1000);
                } else {

                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$message({
                message: '取消新增',
                type: 'info'
            });
            this.$router.back()
        }
    },
    mounted() {
        const packageid = this.$route.query.packageid
        if (packageid) {
            getPackageDetail({ packageid: packageid }).then((res) => {
                this.ruleForm.packagename = res.data[0].packagename
                this.ruleForm.packageimg = res.data[0].packageimg
                this.ruleForm.packagetype = res.data[0].packagetype
                this.ruleForm.applydanger = res.data[0].applydanger
                this.ruleForm.packageproject = res.data[0].packageproject
                this.ruleForm.packageprice = res.data[0].packageprice
                this.ruleForm.desc = res.data[0].packageproject
                this.ruleForm.matters = res.data[0].packageproject
                this.ruleForm.packagestatus = res.data[0].packagestatus
            })
        }
    },
    components: {
        Back,
    }
}
</script>
<style lang="scss">
[Add-Doctor-sty="adddoctor"] {
    .el-form-item__label {
        width: 140px;
        text-align: center;
    }

    .avatar-uploader {
        height: 80px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        background: #f2f2f2;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .el-form-item {
        display: flex;
        align-items: center;
    }

}
</style>
<style lang="scss" scoped>
.changeName {
    color: #006efe;
    font-size: 12px;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-bottom: 20px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>